<script lang="ts" setup>
import { useAppStore } from '@/store'
import { useAuthStore } from '@/store'

const { sessionid, loginMode } = storeToRefs(useAuthStore())
const { enableDebug } = storeToRefs(useAppStore())

const imgUrl = '/static/top02_2.png'
// const imgUrl = 'https://xxxxx:18080/napFileApi/merchant/common/file/download?imageId=top02&bindingType=1'

const clickCount = ref(0) // 用来统计点击数，打开控制台
const enabled = ref(enableDebug.value)

function goLogin () {
  if (sessionid.value && loginMode.value === 'home') {
    uni.switchTab({
      url: '/pages/home/index',
    })
  } else {
    uni.navigateTo({
      url: '/pages/login/index?from=index',
    })
  }
}
function goApply () {
  uni.navigateTo({
    url: '/pages-sub/apply/index',
  })
}
function goSetting () {
  uni.navigateTo({
    url: '/pages-sub/setting/index',
  })
}
function clickPuter () {
  if (clickCount.value >= 4) {
    clickCount.value = 0
    enabled.value = !enabled.value
    wx.setEnableDebug({
      enableDebug: enabled.value,
    })
  } else {
    clickCount.value++
  }
}
</script>

<template>
  <div class="index">
    <div class="top">
      <div class="title">
        您身边的
        <br>
        收款服务专家
      </div>
      <div class="puter" @click="clickPuter">
        <image :src="imgUrl" class="image" />
      </div>
    </div>
    <!-- <div class="blocks">
      <div class="block">
        <div class="left">
          <image
            class="image"
            src="/static/index/2.png"
          />
        </div>
        <div class="right">
          <div class="title">进件查询</div>
          <div class="desc">收单商户进度查询</div>
        </div>
      </div>
      <div class="block" style="margin-right: 5%" @click="goApply">
        <div class="left">
          <image class="image" src="/static/index/1.png" />
        </div>
        <div class="right">
          <div class="title">商户申请</div>
          <div class="desc">开通绵商行商户收单</div>
        </div>
      </div>
      <div class="block" @click="goLogin">
        <div class="left">
          <image class="image" src="/static/index/3.png" />
        </div>
        <div class="right">
          <div class="title">商户登录</div>
          <div class="desc">绵商行收单商户登录入口</div>
        </div>
      </div>
      <div class="block" @click="goSetting">
        <div class="left">
          <image class="image" src="/static/index/4.png" />
        </div>
        <div class="right">
          <div class="title">应用设置</div>
          <div class="desc">应用环境、调试控制台</div>
        </div>
      </div>
    </div> -->
    <div class="li-home-list">
      <div class="li-home-list-item shake_c" @click="goApply">
        <div class="li-home-list-item-text">
          <div class="li-home-list-item-text-title">成为商户</div>
          <div class="li-home-list-item-text-desc">开通绵商行商户收单</div>
        </div>
        <div class="li-home-list-item-icon">
          <!-- <image class="li-home-list-item-icon-img" mode="widthFix" src="/static/home/sq.png" /> -->
          <image class="li-home-list-item-icon-img" mode="widthFix" src="/static/cwsh.png" />
        </div>
      </div>

      <div class="li-home-list-item shake_c" @click="goLogin">
        <div class="li-home-list-item-text">
          <div class="li-home-list-item-text-title">我是商户</div>
          <div class="li-home-list-item-text-desc">绵商行收单商户登录入口</div>
        </div>
        <div class="li-home-list-item-icon">
          <!-- <image class="li-home-list-item-icon-img" mode="widthFix" src="/static/home/sj.png" /> -->
          <image class="li-home-list-item-icon-img" mode="widthFix" src="/static/wssh.png" />
        </div>
      </div>

      <!-- <div class="li-home-list-item shake_c" @click="goSetting">
        <div class="li-home-list-item-text">
          <div class="li-home-list-item-text-title">应用设置</div>
          <div class="li-home-list-item-text-desc">应用环境、调试控制台</div>
        </div>
        <div class="li-home-list-item-icon" style="top: 30rpx;right: 40rpx;">
          <image class="li-home-list-item-icon-img" mode="widthFix" src="/static/index/4.png" style="width: 170rpx;" />
        </div>
      </div> -->
    </div>
  </div>
</template>

<route  lang="json">
{
  "layout": "custom",
  "style": {
    "backgroundColorTop": "#a2ecfe",
    "backgroundColorBottom": "#f1f1f1",
    "navigationStyle": "custom",
    "navigationBarTitleText": "Home",
    "navigationBarBackgroundColor": "#f1f1f1"
  }
}
</route>

<style lang="sass" scoped>
.index
  .top
    display: flex
    justify-content: space-between
    padding: 20px 20px
    .title
      font-size: 28px
      font-weight: bold
      color: #424242
      padding: 20px 0
      font-style: italic
    .puter
      width: 115px
      height: 115px
      .image
        width: 100%
        height: 100%
  .blocks
    display: flex
    flex-wrap: wrap
    padding: 0 7%
    .block
      width: 41%
      padding: 15px 10px 5px
      background-color: #fff
      border-radius: 10px
      display: flex
      justify-content: space-between
      margin-bottom: 5%
      .left
        width: 60px
        height: 60px
        text-align: center
        padding-top: 10px
        .image
          width: 44px
          height: 40px
      .right
        width: 70px
        .title
          font-size: 14px
          font-weight: bold
          margin-bottom: 6px
        .desc
          font-size: 11px
          color: #8e8e8e
</style>
